<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>多数据源价格比较</span>
        <div>
          <el-tag type="success">每分钟自动更新所有数据源</el-tag>
          <el-button type="primary" size="small" @click="fetchAllDataSources" :loading="isLoading" style="margin-left: 10px;">立即刷新全部</el-button>
        </div>
      </div>
    </template>
    <el-table :data="comparisonData" style="width: 100%" border>
      <el-table-column prop="symbol" label="交易对" width="120"></el-table-column>
      <el-table-column label="CoinGecko">
        <template #default="scope">
          <div class="price-cell">
            <div>{{ scope.row.coingecko.price || '加载中...' }}</div>
            <div :class="{ 'up': scope.row.coingecko.change > 0, 'down': scope.row.coingecko.change < 0 }">
              {{ scope.row.coingecko.change > 0 ? '+' : '' }}{{ scope.row.coingecko.change }}%
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="Binance">
        <template #default="scope">
          <div class="price-cell">
            <div>{{ scope.row.binance.price || '加载中...' }}</div>
            <div :class="{ 'up': scope.row.binance.change > 0, 'down': scope.row.binance.change < 0 }">
              {{ scope.row.binance.change > 0 ? '+' : '' }}{{ scope.row.binance.change }}%
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="CryptoCompare">
        <template #default="scope">
          <div class="price-cell">
            <div>{{ scope.row.cryptocompare.price || '加载中...' }}</div>
            <div :class="{ 'up': scope.row.cryptocompare.change > 0, 'down': scope.row.cryptocompare.change < 0 }">
              {{ scope.row.cryptocompare.change > 0 ? '+' : '' }}{{ scope.row.cryptocompare.change }}%
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="价格差异">
        <template #default="scope">
          <div class="price-diff">
            <el-tooltip content="最高价与最低价之间的差异百分比" placement="top">
              <span :class="{ 'warning': scope.row.priceDiff > 1 }">
                {{ scope.row.priceDiff.toFixed(2) }}%
              </span>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: 'DataSourceComparison',
  props: {
    comparisonData: {
      type: Array,
      required: true
    },
    isLoading: {
      type: Boolean,
      required: true
    }
  },
  emits: ['fetch-all-data-sources'],
  setup(props, { emit }) {
    const fetchAllDataSources = () => {
      emit('fetch-all-data-sources')
    }

    return {
      fetchAllDataSources
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.price-cell div:first-child {
  font-weight: bold;
  margin-bottom: 4px;
}

.price-diff .warning {
  color: #e6a23c;
  font-weight: bold;
}

.up {
  color: #14b143;
}

.down {
  color: #ef232a;
}
</style>